// 自定义layer样式
// layer.config({
//   skin: 'demo-class'
// })
//请求动画帧，减少浏览器的卡顿
window.requestAnimFrame = ( function() {
	return window.requestAnimationFrame ||
	window.webkitRequestAnimationFrame ||
	window.mozRequestAnimationFrame ||
	function( callback ) {
		window.setTimeout( callback, 1000 / 60 );
	};
})();

if ($('#header').length != 0) {
	// 导航栏
	let $nav = $('#nav')
	let $li = $nav.find('li')
	const index = $li.filter('.active').index()
	// $nav.find('span').css({'transform', 'translate3d(' + index * 100 + 'px,0,0)')
	if (index != -1) {
		$nav.find('span').css({
			'transform': 'translate3d(' + index * 100 + 'px,0,0)',
			'opacity': "1"
		});
	}
	$('#nav').on('mouseenter', 'li', function () {
		let num = $(this).index()
		$nav.find('span').css({
			'transform': 'translate3d(' + num * 100 + 'px,0,0)',
			'opacity': "1"
		})
	})
	$('#nav').on('mouseleave', function () {
		if (index != -1) {
			$nav.find('span').css('transform', 'translate3d(' + index * 100 + 'px,0,0)')
		} else {
			$nav.find('span').css('opacity', '0')
		}
	})

	// 未登录动画
	if ($("#not-login").length != 0) {
		let img1 = $('#imgmove1')
		let img2 = $('#imgmove2')
		let left1 = 0, left2 = 320, speed = 2
		img1.css('left', left1 + 'px');
		img2.css('left', left2 + 'px');
		(function imgmove () {
			left1 -= speed
			left2 -= speed
			if (left1 <= -320) {
				left1 = 320
			}
			if (left2 <= -320) {
				left2 = 320
			}
			img1.css('left', left1 + 'px')
			img2.css('left', left2 + 'px')
			requestAnimFrame(imgmove)
		}())
	} 
}
// 个人中心小导航
if ($('#home-nav').length != 0) {
	// 导航条的默认位置，初始值为true
	var flag = true
	$(window).on('scroll', function(event) {
		event.preventDefault();
		if ($(document).scrollTop() > 240) {
			if (flag) {
				$('#home-nav .inner').addClass('home-navfix')
				$('#home-nav').append('<div style="height: 60px" id="staybox"></div>')
				flag = false
			}
		} else {
			if (!flag) {
				$('#home-nav .inner').removeClass('home-navfix')
				$('#staybox').remove()
				flag = true
			}
		}
	});
}

//  图片展示页面，图画鼠上去的变化
let Objli = $('.list ul li')
Objli.on('mouseenter', function(event) {
	let type = $(this).attr('data-type')
	if (type == 1) {
		$(this).find('.pic').addClass('trm-none')
	} else if (type == 2) {
		let detail = $(this).find('.detail')[0]
		detail.scrolltop = 0
		let allheight = detail.scrollHeight
		let seeheight = detail.offsetHeight
		let scrotop = detail.scrollTop
		let movetop = allheight - seeheight
		let start = 0
		function move () {
			start+= 6
			if (start < movetop) {
				$(detail).animate({scrollTop: start}, 200, 'linear')
			} else {
				clearInterval(clock)
			}
		}
		window.clock = setInterval(move, 200)
	}
})
Objli.mouseleave(function() {
	let type = $(this).attr('data-type')
	if (type == 1) {
		$(this).find('.pic').removeClass('trm-none')
	} else {
		clearInterval(window.clock)
		$(this).find('.detail').animate({scrollTop: 0}, 200)
	}
})

// 个人中心投食
// 点击选择
if ($('#homepage').length != 0) {
	$('#food').click(function(event) {
		let left = $(this).parents('.btn').offset().left -56
		let top = $(this).parents('.btn').offset().top - $(document).scrollTop() + 76
		console.log(left, top)
		layer.open({
		  type: 1,
		  title: false,
		  closeBtn: 0,
		  offset: [top + 'px', left + 'px'],
		  skin: 'food-class', //加上边框
		  area: '675px', //宽高
		  btn: '确定',
		  yes: function(){
		  	// 着了还差个接口，成功就执行
		  	layer.closeAll()
		  	let ul = $('#whathead')
			let li = ul.find('li')
			ul.find('#ball').addClass('ball')
			setTimeout(function () {
			    if (li.length >= 7) {
			      li.last().remove()
			      ul.prepend('<li><img src="static/img/banner.png" alt=""></li>')
			    } else {
			      ul.prepend('<li><img src="static/img/banner.png" alt=""></li>')
			    }
			    list()
			    ul.find('#ball').removeClass('ball')
			}, 1100)
		  },
		  shadeClose: true,
		  content: $("#foodbox")
		})
	});
	$('#foodbox ul').on('click', 'li', function(event) {
		event.preventDefault();
		$(this).addClass('active').siblings('li').removeClass('active')
	});
	// 列表排序
	list()
	function list () {
	  let Oul = $('#whathead')
	  let Oli = Oul.find('li')
	  let newLi = Oli.filter(function(index) {
	    return index > 1
	  });
	  if (newLi.length > 3) {
	    newLi.css('position', 'absolute');
	    if (newLi.length == 4) {
	      newLi.each(function(index, el) {
	        var left
	        if (index !== 3) {
	          left =102 + index * 40
	        } else {
	          left =102 + index * 40 -10
	        }
	        let zz = 10 - index
	        $(el).css({
	          left: left + 'px',
	          "z-index": zz
	        });
	      });
	    } else if (newLi.length == 5) {
	      newLi.each(function(index, el) {
	        var left
	        if (index !== 4) {
	          left =102 + index * 32
	        } else {
	          left =102 + index * 32 -12
	        }
	        let zz = 10 - index
	        $(el).css({
	          left: left + 'px',
	          "z-index": zz
	        });
	      });
	    } else{
	      console.log('太多了')
	    }
	  }
	}
}

// 各种作品文章的点赞，转发
// 收藏按钮
$('.detail').on('click', '.icon-xing3', function(event) {
	event.preventDefault();
});
// 帮宣按钮
$('.detail').on('click', '.zhuanfa', function(event) {
	event.preventDefault();
	layer.open({
	  type: 1,
	  title: '帮宣到我的动态',
	  skin: 'demo-class', //加上边框
	  area: '600px', //宽高
	  btn: '帮宣',
	  yes: function(){
	  	console.log($('#bangxuan').val())
	  },
	  shadeClose: true,
	  content: '<textarea  style="resize:none" id="bangxuan" placeholder="说点什么吧..."></textarea>'
	})
});
// 打赏按钮
$('.detail').on('click', '.money', function(event) {
	event.preventDefault();
	layer.open({
	  type: 1,
	  title: '打赏',
	  skin: 'demo-classshang', //加上边框
	  area: '600px', //宽高
	  btn: '立即打赏',
	  yes: function(){
	  	let money = $('#shang .active').attr('data-id')
	  	console.log(money)
	  },
	  shadeClose: true,
	  content: $("#shang")
	})
});
$('#shang ul li').on('click', function(event) {
	event.preventDefault();
	$(this).addClass('active').siblings('li').removeClass('active')
});
$('#food-control').on('click', 'a', function(event) {
	event.preventDefault();
	let result = parseInt($('#food-num').val())
	if (this.id == 'food-jian') {
		if (result > 1) {
			result --
			$('#food-num').val(result)
		}
	} else if (this.id == 'food-jia') {
		result ++
		$('#food-num').val(result)
	}
});

// 分类管理按钮
$('#control').click(function(event) {
	layer.open({
	  type: 1,
	  title: '分类管理',
	  skin: 'demo-class', //加上边框
	  area: '460px', //宽高
	  shadeClose: true,
	  content: $("#what-type")
	})
});
// 修改
$('#what-type').on('click', '.editor', function(event) {
	event.preventDefault();
	var text = $(this).closest('.fr').prev('span').text()
	var next = $(this).closest('.box').next()
	next.find('input').val(text)
	next.addClass('trm-none')
});
// 取消
$('#what-type').on('click', '.cancel', function(event) {
	event.preventDefault();
	$(this).closest('.box').removeClass('trm-none')
});
//完成
$('#what-type').on('click', '.ok', function(event) {
	event.preventDefault();
	$(this).closest('.box').removeClass('trm-none')
});
//删除
$('#what-type').on('click', '.dele', function(event) {
	event.preventDefault();
	$(this).closest('li').remove()
});
// 添加
$('#what-type').on('click', '.addname', function(event) {
	/* Act on the event */
	let name = $('#add-name').val()
	if (!name) {
		layer.msg('亲～不能为空哦')
		return
	}
	// 来个ajax，成功的话插入
	$('#what-type ul').append('<li class="clearfix"><div class="box"><span>' + name + '</span><div class="fr"><a href="javascript:;" class="editor">修改</a><a href="javascript:;" class="dele">删除</a></div></div><div class="box hide"><input type="text"><div class="fr"><a href="javascript:;" class="ok">完成</a><a href="javascript:;" class="cancel">取消</a></div></div></li>')
});
// 下面的取消
$('#what-type').on('click', '.cancel-add', function(event) {
	/* Act on the event */
	$('#add-name').val('')
});



// 分类按钮
$('#guilei').click(function(event) {
	$('.mine .btn').css('display', 'block')
	$(this).css('display', 'none').next('#guileizhi').css('display', 'inline-block')
});
$('.mine').on('click', '.btn', function(event) {
	event.preventDefault()
	$(this).toggleClass('check');
});
$('#guileizhi').click(function(event) {
	var self = $(this)
	layer.open({
	  type: 1,
	  title: '分类至',
	  skin: 'demo-class control-class', //加上边框
	  area: '460px', //宽高
	  shadeClose: true,
	  content: $("#drop"),
	  btn: '确定',
	  yes: function(){
	  	self.css('display', 'none').prev('#guilei').css('display', 'inline-block')
		$('.mine .btn').css('display', 'none')
		layer.closeAll()
	  },
	})
});
// 下拉列表
$(".dropdown p").click(function(){ 
    var ul = $(this).next('ul')
    if(ul.css("display")=="none"){ 
        ul.slideDown("fast")
    }else{ 
        ul.slideUp("fast")
    } 
});
$(document).on('click',".dropdown ul li a",function(){ 
    var txt = $(this).text(); 
    var id = $(this).closest('li').attr('data-id'); 
    $(this).closest('ul').siblings('p').html(txt); 
    $(this).closest('ul').siblings('p').attr('data-id',id) 
    $(this).closest('ul').hide(); 
});
// 上传照片
if ($('#space').length != 0) {
	let res = []
	$('#add-input').on('change', function(event) {
		event.preventDefault()
		let data = this.files
		if (data.length > 8) {
			layer.msg('亲~最多传8张图哦')
			return
		}
		for (var i = 0; i < data.length; i ++) {
			let reader = new FileReader()
			reader.readAsDataURL(data[i])
			reader.onload = function (e) {
				let src = e.target.result
				let pos = src.indexOf('4')
				let gg = src.substring(pos + 2)
				if (res.length < 8) {
					$('#pic-container').prepend('<li><img src=' + src + '><i class="icon iconfont icon-guanbiicon"></i></li>')
					res.unshift(gg)
					$('#space_now').text(res.length)
					$('#space_leave').text(8 - res.length)
				} else {
					layer.msg('亲~最多传8张图哦')
					return
				}
			}
		}
	})
	$('#pic-container').on('click', '.icon-guanbiicon', function(event) {
		event.preventDefault();
		let index = $(this).closest('li').index()
		$(this).closest('li').remove()
		res.splice(index, 1)
		console.log(res)
	});
	$('#pic-container').on('mouseenter', '.icon-guanbiicon', function(event) {
		event.preventDefault();
		$(this).closest('li').addClass('sshake')
	});
	$('#pic-container').on('mouseout', '.icon-guanbiicon', function(event) {
		event.preventDefault();
		$(this).closest('li').removeClass('sshake')
	});
}
// $(window).load(function() {
// 	$('.detail .xingqing p span').html(replace_em($('.detail .xingqing p span').html()))
// });
// function replace_em(str){
// 	str = str.replace(/\</g,'&lt;');
// 	str = str.replace(/\>/g,'&gt;');
// 	str = str.replace(/\n/g,'<br/>');
// 	str = str.replace(/\[em_([0-9]*)\]/g,'<img src="assets/libs/arclist/$1.gif" border="0" />');
// 	return str;
// }